<template>
  <div class="device-install">
    <div id="pie"></div>
    <div class="legend">
      <div v-for="(item,i) in datas" :key="i">
        <span :style='"background:" + item.itemStyle.normal.color + ";box-shadow: 0px 6px 5px " +item.itemStyle.normal.color + ";"'></span>
        {{item.name}}
      </div>
    </div>
  </div>
</template>

<script>
import Config from '../../../config'
// import { regionData } from 'element-china-area-data'
import { regionData } from 'static/js/regionData'
export default {
  props: ['schedule'],
  name: 'DeviceInstall',
  data() {
    return {
      datas: []
    }
  },
  watch: {
    schedule() {
      this.install()
    }
  },
  methods: {
    install() {
      let url = `${Config.DEVICE_MANAGE_URL}/storehouses/group_by_province`;

      this.$http.get(url).then(res => {

        let datas = []
        // let arr = res.array.sort((a,b) => b.total_sites - a.total_sites)
        let arr = [{ province: "610000", total_sites: 12 }, { province: "410000", total_sites: 7 }, { province: "410000", total_sites: 6 }, { province: "410000", total_sites: 4 }]
        if (arr.length > 2) {
          // 截取后面的
          let arr1 = arr.splice(2)

          arr.map(item => {
            regionData.map(items => {
              if (items.value === item.province) {
                datas.push({ value: item.total_sites, name: items.label.substr(0, 2) })
              }
            })
          })

          let i = 0
          arr1.map(item => {
            i += item.total_sites
          })
          datas.push({ value: i, name: '其他' })
        } else {
          arr.map(item => {
            regionData.map(items => {
              if (items.value === item.province) {
                datas.push({ value: item.total_sites, name: items.label.substr(0, 2) })
              }
            })
          })
        }

        switch (datas.length) {
          case 1:
            datas[0].itemStyle = { normal: { color: '#1DF1F9' }, emphasis: { color: '#1DF1F9' } }
            break
          case 2:
            datas[0].itemStyle = { normal: { color: '#1DF1F9' }, emphasis: { color: '#1DF1F9' } }
            datas[1].itemStyle = { normal: { color: '#17B5FF' }, emphasis: { color: '#17B5FF' } }
            break
          case 3:
            datas[0].itemStyle = { normal: { color: '#1DF1F9' }, emphasis: { color: '#1DF1F9' } }
            datas[1].itemStyle = { normal: { color: '#17B5FF' }, emphasis: { color: '#17B5FF' } }
            datas[2].itemStyle = { normal: { color: '#4E46FE' }, emphasis: { color: '#4E46FE' } }
            break
        }

        this.datas = datas
        this.pie()
      })
    },
    pie() {
      const dom = document.getElementById('pie')
      if (!dom) {
        return
      }
      let chart = this.$echarts.init(dom)
      chart.setOption({
        title: {//标题组件
          text: '场所省份分布图',
          // left:'50px',//标题的位置 默认是left，其余还有center、right属性
          textStyle: {
            color: "#598CC9",
            fontSize: 14,
          }
        },
        series: [ //系列列表
          {
            name: '设备状态',  //系列名称
            type: 'pie',   //类型 pie表示饼图
            clockwise:false,
            animationDuration: 1500,
            radius: ['50%', '70%'],  //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
            hoverAnimation: false,
            label: {
              normal: {
                formatter: function(data){
                  return data.percent.toFixed() + '%'
                },
                textStyle: {
                  color: '#1CE0FB'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#1CE0FB'
                },
                length: 5,
                length2: 10,
              }
            },
            itemStyle: {
              borderWidth: 2, //设置border的宽度有多大
              borderColor: '#050E28',
            },
            data: this.datas
          }
        ]
      })
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.device-install {
  width: 100%;
  height: 100%;
  #pie {
    width: 100%;
    height: 100%;
  }
  // 图例
  .legend {
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 10px;
    left: 0;
    text-align: center;
    color: #598cc9;
    font-size: 12px;
    div{
      display: inline-block;
      margin: auto;
      width: 40px;
      height: 20px;
      margin-left: 15px;
    }
    span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
    }
  }
}
</style>
